<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no" />
    <title></title>
    <style>
			html,body {
				max-width: 640px;
				height: 100%;
				position: relative;
				margin: auto;
				font-size: 14px;
				font-family: "微软雅黑";
				color: #333;
			}
			body {padding-top: 0px;}
			a,a:hover{text-decoration: none;color: #333; display: block;}
			img {max-width: 100%;}
			ul{padding: 0;}
			ol {margin-bottom: 10px;padding: 10px 8px; padding-left: 24px; overflow: hidden;}
			ol a {display: contents;word-wrap:break-word;  word-break:break-all; }
			div{box-sizing: border-box;}
			.left {float: left;}
			.right {float: right;}
			.clearFlex:after {display: block;content: '';clear: both;}
			.nav_cv {position: fixed; left: 0;top: 0;width: 100%; z-index: 999; height: 44px; padding: 0 15px; background-color: #fff;}
			.icon_back {float: left; padding-left: 22px; height: 44px; position: relative; line-height: 44px; max-width: 80%;}
			.icon_back .icon {position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 10px;}
			.icon_back span {display: block; line-height: 50px; font-size: 18px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
			.conteView {padding-top: 20px;}
			.titleView {padding: 0 15px; position: relative; padding-right: 30px;}
			.titleView h2 {float: left;  margin: auto; font-size: 21px;}
			.titleView .icon_share {position: absolute; right: 15px; top: 50%; transform: translateY(-50%);width: 16px; z-index: 999;}
			.detail_cv {margin-top:20px; padding: 0 15px; padding-bottom: 15px; border-bottom: 1px solid #ddd;}
			.detail_cv .time {font-size: 12px; color:#999;}
			.user_info {line-height: 24px; font-size: 12px;}
			.user_info .name {padding-left:16px; background: url(img/icon_author.png) left center no-repeat; background-size:12px auto; float: left; margin-right:20px; color: #999;}
			.user_info .tt_jn {padding-left:16px; background: url(img/icon_bq.png) left center no-repeat; background-size:12px auto; float: left; margin-right:20px; color: #999;}
			.user_info .tt_bm {padding-left:16px; background: url(img/icon_bm.png) left center no-repeat; background-size:12px auto; float: left; margin-right:20px; color: #999;}
			.user_info .tt_sl {padding-left:16px; background: url(img/icon_ll.png) left center no-repeat; background-size:14px auto; float: left; margin-right:20px; color: #999;}
			.detail_tt {padding: 15px; overflow: hidden;}
			.detail_tt p {display: block;margin-top: 0; margin-bottom:10px; line-height: 22px; font-size: 14px; color: #666; text-indent: 0 !important;}
			.detail_tt .pt_1 {margin-top: 15px;}
			.lwoBtns {position: fixed; box-sizing: border-box; left: 0; bottom:13px; width: 100%; padding: 0 15px; z-index: 9999;}
			.lwoBtns a {display: block; width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 0 10px #dbdbdb; background-color: #fff; float: left;}
			.icon_mg {background: url(img/icon_msg.png) center no-repeat; background-size:25px auto;}
			.icon_sc {margin-right: 15px;background: url(img/icon_sc.png) center no-repeat; background-size:25px auto;}
			.icon_dz {background: url(img/icon_dz.png) center no-repeat; background-size:22px auto;}
			.fontView {margin-top: 4px;}
			.fontView span {display: block;float: left;line-height: 22px; font-size: 13px; color: burlywood; margin-right: 10px;}
			.fontView span:first-child {margin-right:0; color: #666;}
			.fontView span.active {font-size: 14px; font-weight: bold;}
		</style>

</head>
<body>
<div class="app" id="app">
    <!-- 导航部分 -->
    <div class="clearFlex nav_cv" style="display:none;">
        <div class="icon_back">
            <img class="icon" src="img/icon_back.png" >
            <span id="title"></span>
        </div>
    </div>
    <!-- 页面内容 -->
    <div class="conteView">
        <div class="clearFlex titleView">
            <h2 id="titleName">{{list.title}}</h2>
            <img class="icon_share" src="img/icon_share.png" style="display:none;">
        </div>
        <div class="detail_cv">
            <div class="time" id="addtime">发布时间：</div>
            <div class="clearFlex user_info">
                <div class="name" id="author"></div>
                <div class="tt_jn" id="cate"></div>
                <div class="tt_bm" id="level"></div>
                <div class="tt_sl" id="reading"></div>
            </div>
            <div class="clearFlex fontView">
                <span>字体：</span>
                <span class="small">小</span>
                <span class="middle active">中</span>
                <span class="big">大</span>
            </div>
        </div>
        <div class="detail_tt" id="htmlData">
        </div>
    </div>
    <!-- 底部按钮 -->
    <div class="clearFlex lwoBtns" style="display:none;">
        <a class="left icon_mg" href="#"></a>
        <div class="right">
            <a class="icon_sc" href="#"></a>
            <a class="icon_dz" href="#"></a>
        </div>
    </div>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<!--<script src="https://code.jquery.com/jquery-3.3.1.js"></script>-->
<!--<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>-->
<script>
		// var data
		$(document).ready(function () {
		    var data = $.parseJSON(AppActivity.getJson());
			document.getElementById("title").innerText = data.list.title
			document.getElementById("titleName").innerText = data.list.title
			document.getElementById("addtime").innerText = "发布时间：" + data.list.addtime
			document.getElementById("author").innerHTML = data.list.author
			document.getElementById("cate").innerHTML = data.list.cate
			document.getElementById("reading").innerHTML = data.list.reading
			document.getElementById("level").innerHTML = getLevel(data.list.level)
			document.getElementById("htmlData").innerHTML= data.list.content
			$(".detail_tt h1").css({"font-size":"16px"})
		});

		function getLevel(index){
			if (index == 1){
				return "初级保密"
			} else if (index == 2) {
				return "中级保密"
			} else if (index == 3) {
				return "高级保密"
			}
		}
		$(".fontView span").click(function(){
			$(".fontView span").removeClass("active")
			$(this).addClass("active")
			if ($(this).hasClass('small')) {
				// document.getElementById("htmlData").style.fontSize = "12px"
				// $(".detail_tt h1").css({"font-size":"16px"})
				// $(".detail_tt p").css({"font-size":"12px"})
				document.getElementById("htmlData").style.zoom = "0.9"
			} else if ($(this).hasClass('middle')) {
				// document.getElementById("htmlData").style.fontSize = "14px"
				// $(".detail_tt h1").css({"font-size":"18px"})
				// $(".detail_tt p").css({"font-size":"14px"})
				document.getElementById("htmlData").style.zoom = "1"
			} else {
				// document.getElementById("htmlData").style.fontSize = "16px"
				// $(".detail_tt h1").css({"font-size":"18px"})
				// $(".detail_tt p").css({"font-size":"16px"})
				document.getElementById("htmlData").style.zoom = "1.1"
			}
		})
	</script>
</html>
